<template>
  <div>
      <!-- 周边 -->
       <div class="m-aroundVideo">
        <div class="m-title">
          <h2>周边视频</h2>
        </div>
        <div class="m-box">
          <ul>
            <li class="m-pic-list1"  v-for="(item, index) in rim" :key="index.id">
              <div class="piclist-img">
                  <img :src="item.img" alt="" class="piclist-img1" :title="item.title">
                  <div class="c-rt">
                    <img :src="item.img1" alt="">
                  </div>
                  <div class="c-rb">{{item.text1}}</div>
              </div>
              <div class="piclist-title">
                  {{item.text2}}
              </div>
            </li>
          </ul>
        </div>
       </div>
  </div>
</template>

<script>
export default {
name: 'Telev',
props: {
    msg: String
 },
 data() {
     return {
         rim:[]
     }
 },
 mounted () {
     this.$axios.get("/api/rim").then(data => {
         var circumrim = data.data
        //  console.log(circumrim);
         circumrim.forEach(item => {
             item.img = require("../assets/" + item.img)
             item.img1 = require("../assets/" + item.img1)
         })
         this.rim = circumrim
     })
 }
}
</script>

<style>
.m-aroundVideo {
    padding: .07rem .12rem;
    padding-bottom: .40rem;
    border-top: 1px solid #f7f7f7;
    box-sizing: border-box;
    font-size: .15rem;
}
.m-title h2 {
    display: inline-block;
    line-height: .35rem;
 }
 .m-box {
     padding: 15px 0;
 }
  .m-box ul {
      display: flex;
      flex-wrap: wrap;
  }
.m-pic-list1 {
    width: 50%;
    height: auto;
    padding: 0 .05rem;
    box-sizing: border-box;
}
.piclist-img {
    position: relative;
    width: 100%;
    height: 0.96rem;
}
.piclist-img1 {
    width: 100%;
    height: 100%;
}
.c-rt {
    position: absolute;
    top:0.02rem;
    right: 0.02rem;
}
.c-rt img {
    width: 0.28rem;
    height: 0.13rem;
}
.c-rb {
    position: absolute;
    bottom: 0.02rem;
    right: 0.05rem;
    color: #fff;
    height: .23rem;
}
.piclist-title {
    padding: .08rem 0 .11rem;
    line-height: .18rem;
    margin-bottom: .04rem;
    font-size: .15rem;
    color: #333;
    text-align: left;
}
</style>